<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>会员管理</title>
    <%@include file="/WEB-INF/views/commons/commons.jsp" %>
    <script type="text/javascript" src="/static/js/system/member.js"></script>
    <style>
        .dad {
            float: left;
            width: 100%;
            height: 35%;
        }

        .dad div {
            float: left;
            width: 24%;
            height: 100%;
            border: 1px solid #a5b6c8;
        }
    </style>
</head>
<body>
<div style="width: 100%;height:5.5%; margin-bottom: 5px;">
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-add',plain:true" data-cmd="add">新增</a>
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-edit',plain:true" data-cmd="edit">编辑</a>
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-remove',plain:true" data-cmd="changeState" id="btn_changeState">挂失</a>
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-reload',plain:true" data-cmd="reload">刷新</a>
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-edit',plain:true" data-cmd="changePassword">修改密码</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-edit',plain:true" data-cmd="changeCardno">补卡</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input style="width: 200px;"  class="easyui-textbox" name="keyword" id="keyword" prompt="输入卡号、名字或电话">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true"
       data-cmd="query">查询</a>
</div>

<div class="dad" style="margin-top:5px;">
    <div style="background-color: #d8ffe6;">
        <p style="margin:0;padding: 10px 15px;font-size: 20px;">今天过生日的会员</p>
        <p id="todayBirthNumber" style="margin: 0;padding: 30px 100px;color: red;font-size: 50px;">0位</p>
        <p id="otherBirthNumber" style="margin: 0;padding: 10px 15px;font-size: 20px;">本月还有<font color="red">0</font>位会员生日
        </p>
    </div>
    <div style="background-color: #d8ffe6;margin-left: 1%;">
        <p style="margin:0;padding: 10px 15px;font-size: 20px;">会员总数</p>
        <p id="todayMemberNumber" style="margin: 0;padding: 30px 100px;color: red;font-size: 50px;">0位</p>
        <p id="totalBalance" style="margin: 0;padding: 10px 15px;font-size: 20px;">储值卡总额:<font color="red">¥0</font>
        </p>
    </div>
    <div style="background-color: darkgray;margin-left: 1%;">
        <p style="margin:0;padding: 10px 15px;font-size: 20px;">会员累计消费</p>
        <p id="totalSpend" style="margin: 0;padding: 50px 80px;color: red;font-size: 30px;">¥99.99</p>
    </div>
    <div style="background-color: darkgray;margin-left: 1%;">
        <p style="margin:0;padding: 10px 15px;font-size: 20px;">会员消费TOP3</p>
        <p id="top1" style="margin:0;padding: 10px 15px;font-size: 20px;">会员消费TOP3</p>
        <p id="top2" style="margin: 0;padding: 10px 15px;font-size: 20px;">会员消费TOP3</p>
        <p id="top3" style="margin: 0;padding: 10px 15px;font-size: 20px;">会员消费TOP3</p>
    </div>
</div>

<div style="width: 100%;height: 59%;">
    <table id="member_datagrid"></table>
</div>

<!-- 员工新增或编辑 -->
<div id="member_dialog">
    <form id="member_form" method="post" style="padding:20px 0px 0px 20px;">
        <input type="hidden" id="memberId" name="id">
        <table align="center" style="margin: auto;border-collapse: separate; border-spacing: 10px">
            <tr>
                <td>会员卡号</td>
                <td>
                    <input name="cardno" class="easyui-textbox" type="text" prompt="请输入会员卡号">
                </td>
                <td>会员姓名</td>
                <td>
                    <input name="name" class="easyui-textbox" type="text" prompt="请输入会员姓名">
                </td>
            </tr>

            <tr>
                <td>手机号码</td>
                <td><input class="easyui-textbox" name="tel" prompt="请输入手机号">
                </td>
                <td>会员密码</td>
                <td><input class="easyui-passwordbox" id="password" name="password" prompt="请输入密码">
                </td>
            </tr>

            <tr>
                <td>会员等级</td>
                <td><input class="easyui-combobox" name="level.id" data-options="
                    valueField: 'id',textField: 'text', panelHeight:'auto' ,data: [{
                            id: '3',
                            text: '青铜会员'
                        },{
                            id: '2',
                            text: '白银会员'
                        },{
                            id: '1',
                            text: '黄金会员'
                        }]">
                </td>
                <td>会员称谓</td>
                <td><input class="easyui-combobox" name="nick" data-options="
                    valueField: 'id',textField: 'text', panelHeight:'auto',data: [{
                            id: '1',
                            text: '先生'
                        },{
                            id: '0',
                            text: '女士'
                        }]">
                </td>
            </tr>
            <tr>
                <td>开卡金额</td>
                <td><input class="easyui-textbox" name="balance" prompt="请输入金额">
                </td>
                <td>会员生日</td>
                <td><input class="easyui-datebox" name="birthday" prompt="请选择日期">
                </td>
            </tr>
            <tr>
                <td>开卡员工</td>
                <td><input class="easyui-combobox" name="operator" prompt="请选择开卡员工" data-options="
                    valueField: 'id',textField: 'realname', panelHeight:'auto', url:'/employee/allEmps'">
                </td>
                <td>过期时间</td>
                <td><input class="easyui-datebox" name="deadline" prompt="请选择有效期">
                </td>
            </tr>
            <%--以下为更多选择添加项--%>
            <tr>
                <td><a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-more'"
                       data-cmd="more">更多</a></td>
            </tr>
            <tr class="moreinfo" style="display: none">
                <td>QQ</td>
                <td><input class="easyui-textbox" name="qq" prompt="请输入QQ号">
                </td>
                <td>邮箱</td>
                <td><input class="easyui-textbox" name="email" prompt="请输入邮箱">
                </td>
            </tr>
            <tr class="moreinfo" style="display: none">
                <td>会员地址</td>
                <td><input class="easyui-textbox" name="address" prompt="请输入地址">
                </td>
                <td>喜好</td>
                <td><input class="easyui-textbox" name="hobby" prompt="请输入爱好">
                </td>
            </tr>


        </table>
    </form>
</div>
<%--修改密码的对话框--%>
<div id="memberpass_dialog">
    <form id="memberpass_form" method="post" style="padding:20px 0px 0px 20px;">
        <input type="hidden" id="membeId" name="id">
        <table align="center" style="margin: auto;border-collapse: separate; border-spacing: 10px">
            <tr>
                <td>新密码</td>
                <td>
                    <input id="pwd" type="password" class="easyui-validatebox" data-options="required:true"
                           prompt="请输入新密码"/>
                </td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td>
                    <input id="rpwd" name="newpassword" type="password" class="easyui-validatebox"
                           required="required" validType="equals['#pwd']" prompt="请再次输入新密码"/>
                </td>
            </tr>
        </table>
    </form>
</div>

<%--补卡的对话框--%>
<div id="membercardno_dialog">
    <form id="membercardno_form" method="post" style="padding:20px 0px 0px 20px;">
        <input type="hidden" id="membId" name="id">
        <table align="center" style="margin: auto;border-collapse: separate; border-spacing: 10px">
            <tr>
                <td>原卡号</td>
                <td>
                    <input class="easyui-textbox" id="oldcardno" prompt="请输入新卡号" readonly="true">
                </td>
            </tr>
            <tr>
                <td>新卡号</td>
                <td>
                    <input class="easyui-textbox" name="cardno" prompt="请输入新卡号">
                </td>
            </tr>
        </table>
    </form>
</div>




<!-- 新增编辑底部按钮 -->
<div id="bb">
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-save',plain:true"
       data-cmd="save">保存</a> <a
        href="#" class="easyui-linkbutton"
        data-options="iconCls:'icon-cancel',plain:true" data-cmd="cancel">取消</a>
</div>
<!-- 密码修改底部按钮 -->
<div id="pp">
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-save',plain:true"
       data-cmd="comfirmpass">确认修改</a> <a
        href="#" class="easyui-linkbutton"
        data-options="iconCls:'icon-cancel',plain:true" data-cmd="cancelpass">取消</a>
</div>
<!-- 换卡底部按钮 -->
<div id="cc">
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-save',plain:true"
       data-cmd="comfirmcardno">确认换卡</a> <a
        href="#" class="easyui-linkbutton"
        data-options="iconCls:'icon-cancel',plain:true" data-cmd="cancelcardno">取消</a>
</div>

</body>
</html>